<template>
<div class="writer-article-wrap" >
     <div class="head-title">
       <span class="home-page">首页</span>
        <i class="separate-line"></i>
       <div class="writeInfo-div">
         <span>写文章</span>
       </div>
       <div class="public-div">
         <button class="button-primary" @click="publcArticle()">发 布</button>
       </div>
     </div>
  <div class="content-div">
    <div class="title">
      <input placeholder="请输入文章标题" v-model="title">
    </div>

    <div class="editStyle">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)">
      </quill-editor>
    </div>
  </div>
</div>
</template>

<script>
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction
    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image'],
    ['clean']

  ]
    export default {
      name: "writeArticle",

      data() {
        return {
          quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
          content: null,
          title:"",
          uuid:"",
          editorOption: {
            placeholder: '',
            theme: 'snow',  // or 'bubble'
            modules: {
              toolbar: {
                container: toolbarOptions,
                handlers: {
                  'image': function (value) {
                    if (value) {
                      // 触发input框选择图片文件
                      document.querySelector('.avatar-uploader input').click()
                    } else {
                      this.quill.format('image', false);
                    }
                  }
                }
              }
            }
          },
          serverUrl: '/manager/common/imgUpload',  // 这里写你要上传的图片服务器地址
          header: {
            // token: sessionStorage.token
          } // 有的图片服务器要求请求头需要有token
        }
      },
      methods: {
        onEditorChange({editor, html, text}) {//内容改变事件
          this.content = html
        },
        beforeUpload() {     // 显示loading动画
          this.quillUpdateImg = true
        },
        uploadSuccess(res, file) {
          // res为图片服务器返回的数据
          // 获取富文本组件实例
          console.log(res);
          let quill = this.$refs.myQuillEditor.quill
          // 如果上传成功
          if (res.code == 200 ) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片  res.url为服务器返回的图片地址
            quill.insertEmbed(length, 'image', res.url)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            this.$message.error('图片插入失败')
          }
          // loading动画消失
          this.quillUpdateImg = false
        },
        // 富文本图片上传失败
        uploadError() {
          // loading动画消失
          this.quillUpdateImg = false
          this.$message.error('图片插入失败')
        },
        publcArticle:function () {


          this.$axios({
            method:"post",
            url:"/solvePlat/workInfo/saveWorkInfo",
            data:{
              content:this.content,
              title:this.title,
              uuid:this.uuid
            }
          }).then(res=>{
            if (res.data.success === true){
              this.uuid = res.data.data;
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
            }else{
              this.$message.error({
                message: res.data.msg
              });
            }
          })


        }
      }
    }

</script>

<style scoped>
  .editStyle{
    width: 660px;
    margin: 0 auto;
    height: 1000px;
  }
  .title{
    width: 660px;
    margin: 15px auto 15px;
  }
  .title input{
    width: 99.4%;
    height: 39px;
    border: solid 1px #3a345342;
    font-size: 20px;
  }

  .head-title{
    width: 800px;
    margin: 0px auto;
  }

  .writeInfo-div{
    display: inline-block;
    font-size: 16px;
    font-weight: 100;
  }

  .public-div{
    margin-left: 77%;
    display: inline-block;
  }
  .home-page{
    font-size: 18px;
    font-weight: 600;
  }
  .separate-line{
    height: 29px;
    width: 2px;
    background-color: #ebebeb;
    margin-left: 17px;
  }
  .writer-article-wrap{
    margin-top: 20px;
  }
  .content-div{
    border-top: solid #f0f0f0 2px;
    width: 90%;
    margin: 20px auto 0px;
  }
  .quill-editor{
    height: 1000px;
  }

  .button-primary {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
  }
</style>
